<template>
  <div class="good-box">
    <div class="selection"><h3>商品精选</h3></div>
    <!-- <div class="selection"><img src="https://bpic.588ku.com/element_pic/20/06/30/2c8f11fc3033d0e138f1067085424958.jpg!/fw/253/quality/90/unsharp/true/compress/true"/></div> -->
    <van-sticky offset-top="5.5rem" style="width: 100%" @change="change">
      <van-tabs
        v-if="category.length != 1"
        v-model:active="active"
        title-active-color="#d7b68e"
        background="transparent"
        line-width="6"
        line-height="6"
        color="#d7b68e"
        @click="categoryGoods"
      >
        <van-tab
          v-for="(value, index) in category"
          :key="index"
          :title="value.cat_name"
        >
        </van-tab>
      </van-tabs>
    </van-sticky>
    <div class="good-list-box">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        v-model:error="error"
        error-text="服务器累了，点击重新加载"
        offset="500"
        @load="onLoad"
        :key="2"
      >
        <div class="good-list">
          <div
            class="good-item"
            v-for="(value, index) in goods"
            :key="index"
            :sku="value.F_ProductId"
          >
            <!-- <a class="good-card" :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'+($store.state.userInfo.F_Question?'?parents_id='+$store.state.userInfo.F_Question:'')"> -->
            <div
              class="good-card"
              @click="
                toshop(value.F_ProductId, $store.state.userInfo.F_Question)
              "
            >
              <!-- <div
              class="good-card"
              @click="
                $router.push(
                  '/product/' +
                    value.F_ProductId +
                    '/' +
                    $store.state.userInfo.F_Question
                )
              "
            > -->
              <!-- <a :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'" class="good-card"> -->
              <!-- <div class="good-card"> -->
              <!-- <img
              class="product-img lazy-img"
              :src="'http://higuang365.com/' + value.F_pic_url"
              @load="loadimg($event)"
              data-lazy="loading"
            /> -->
              <van-image
                class="lazy-img"
                width="100%"
                height="calc(50vw - 2rem)"
                lazy-load
                :src="'http://higuang365.com/' + value.F_pic_url"
              />
              <div class="good-desc">
                <div class="county">
                  <img
                    class="county-icon"
                    v-if="value.F_yuliu2"
                    :src="'http://higuang365.com/' + value.F_yuliu2"
                    alt=""
                  />
                  <div class="county-title">{{ value.F_BrandCountrie }}</div>
                </div>

                <div class="title">{{ value.F_Name }}</div>
                <span class="price">¥ {{ value.F_Price }}</span>
                <br />
                <span class="estimate">{{ value.F_Amount }}</span>
                <!-- <a :href="'http://www.higuang365.com/wap/product-'+value.F_ProductId+'.html'" 
                    @click.stop="showShare()"> -->
                <!-- <a href="http://www.higuang365.com/wap/index.html" -->
                <!-- <a @click.stop="toshop(value.F_ProductId,$store.state.userInfo.F_Question)"> -->
                <span
                  class="share"
                  @click.stop="
                    showShare(value, $store.state.userInfo.F_Question)
                  "
                >
                  <!-- @click.stop="showShare()" -->
                  <van-icon name="share-o" />分享</span
                >
                <!-- </a> -->

                <!-- <div class="shop">{{ value["店铺"] }}</div> -->
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </div>
    <van-overlay :show="showherf" z-index="10001">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" color="#fff" size="3rem" vertical
          >前往商城</van-loading
        >
      </div>
    </van-overlay>
  </div>
</template>
<script>
import { toRefs, reactive } from "vue";
import { Products, GetProductClass } from "@/api/home";
export default {
  setup() {
    const data = reactive({
      goods: [],
      listbanner: [
        "https://img10.360buyimg.com/babel/jfs/t1/154825/27/19542/32051/603772f1E8d846eb2/2d75bb25cc4087a5.jpg.webp",
        "https://img11.360buyimg.com/babel/jfs/t1/157306/21/8835/35314/6038b775Ebd1e357b/7b4fa98e5e85e312.jpg.webp",
        "https://img30.360buyimg.com/babel/jfs/t1/168145/32/7162/38258/6033a763E2baeabff/4b92d9d8713b4c4a.jpg.webp",
        "https://img11.360buyimg.com/babel/jfs/t1/153373/14/20968/87036/6040435bE4b0af248/93a3655238a65105.jpg.webp",
      ],
      products: {
        ques: "", //商品查询条件（可按条码、品名、商品代码）
        pageNum: 1, //页码
        pageSize: 30, //每页显示条目数
        strclass: "42", //分类
        // Strlv: getCookie("MLV"),
      },
      //error: false,
      loading: false,
      finished: false,
      Refresh: false,
      error: false,
      showherf: false,
      active: 0,
      category: [
      {
          cat_id: "",
          cat_name: "精选",
          child_count: 2,
          goods_count: 0,
          icon: "",
          p_order: 0,
          parent_id: 0,
        },
      ],
    });
    const onLoad = async () => {
      const res = await Products(data.products);
      console.log("goods", res);
      data.loading = false;
      if (!res[0]) {
        data.error = true;
        return;
      }
      data.goods.push(...res[1]);
      data.products.pageNum = data.products.pageNum + 1;
      if (res[1].length < data.products.pageSize) {
        data.finished = true;
      }
    };

    const loadimg = (event) => {
      event.target.dataset.lazy = "loaded";
    };

    const toshop = (F_ProductId, F_Question) => {
      data.showherf = true;
      setTimeout(() => {
        data.showherf = false;
        window.location.href =
          "http://www.higuang365.com/wap/#/product?id=" +
          F_ProductId +
          "&parents_id=" +
          F_Question;
      }, 2000);
    };
    const showShare = (value, F_Question) => {
      let purl = "http://higuang365.com/" + value.F_pic_url; //可以是本地图片
      var surl =
        "http://www.higuang365.com/wap/#/product?id=" +
        value.F_ProductId +
        "&parents_id=" +
        F_Question; //分享的链接
      let msg = {
        title: "嗨逛全球", //标题
        content: value.F_Name, //内容
        thumbs: [purl], //缩略图
        href: surl,
        extra: {
          scene: "WXSceneChooseByUser",
        },
      };
      if (navigator.userAgent.indexOf("haiguang_mobile") > -1) {
        window.location.href = `higuang|shareGood|${msg.title}|${msg.content}|${purl}|${surl}`;
      } else {
        window.location.href =
          "http://www.higuang365.com/wap/#/product?id=" +
          value.F_ProductId +
          "&parents_id=" +
          F_Question;
      }

      // window.plus.share.getServices((e) => {
      //   //在这个数组里 找到属于微信的对象 循环匹配查找
      //   for (var i in e) {
      //     if ("weixin" == e[i].id) {
      //       data.sharewx = e[i]; //保存到变量里 （之后即可使用该对象发起分享）
      //       data.sharewx.send(msg, () => {
      //         alert("成功");
      //       });
      //     }
      //   }
      // });
    };
    const categoryGoods = async () => {
      console.log('ww');
      console.log('scrollGoods',scrollGoods);
      data.finished = false;
      data.products.strclass = data.category[data.active].cat_id;
      data.products.pageNum = 1;
      data.goods = [];
      // document.getElementById("app").scrollTop = scrollGoods + 1;
      // document.getElementById("app").scrollTop = scrollGoods - 1;
      if (scrollGoods > 0) {
        document.getElementById("app").scrollTop = scrollGoods;
        console.log('wweq');
            document.getElementById("app").scrollTop++
      } else {
        document.getElementById("app").scrollTop++
      }
  
    };
    let scrollGoods = 0;
    const change = (isFixed) => {
      if (isFixed) {
        scrollGoods = document.getElementById("app").scrollTop;
      }
    };
    const load = async () => {
      const res = await GetProductClass();
      console.log("分类", res);
      if (!res[0]) {
        return;
      }
      res[1].map((item) => {
        if (!item.child_count && item.p_order < 30) {
          data.category.push(item);
        }
      });
      data.category.sort((a, b) => a.p_order - b.p_order).splice(1,1);
      data.category.unshift({
        cat_id: "42",
        cat_name: "促销礼包",
        child_count: 0,
        goods_count: 0,
        icon: "",
        p_order: 10,
        parent_id: 41,
      });
    };
    load();
    return {
      ...toRefs(data),
      onLoad,
      showShare,
      loadimg,
      toshop,
      categoryGoods,
      change,
    };
  },
};
</script>

<style lang="scss" scoped>
@import "@/common/style/mixin";
.good-box {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 6rem;
  background: #fff;
  .good-list-box {
    min-height: 100vh;
  }
  .good-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    width: calc(100vw - 2rem);
    margin: auto;
  }
  .promotional {
    display: flex;
    width: calc(50% - 1rem);
    flex-direction: column;
    margin-left: 1rem;
    .promotion-item {
      flex: 1;
      img {
        width: 100%;
      }
    }
  }
  .selection {
    width: 100%;
    background: url("../../common/img/jingxuan.png_.webp") no-repeat;
    background-size: 100%;
    background-position-y: 0.6rem;
    h3 {
      // color: #7889fc;
      // text-shadow: 5px 2px 3px #b1bbff;
      color: #ff5c77;
      text-shadow: 5px 2px 3px #ffa0b0;
      font-size: 2rem;
    }
  }
  .good-item {
    box-sizing: border-box;
    width: 50%;
    border-bottom: 1px solid #e9e9e9;
    padding: 1rem 0.5rem;
    animation: jello-horizontal 1s both;
    .good-card {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    .product-img {
      display: block;
      width: 100%;
      height: calc(50vw - 2rem);
      margin: 0 auto;
    }
    .good-desc {
      text-align: left;
      font-size: 1.2rem;
      padding-top: 1rem;
      position: relative;
      .county {
        display: flex;
        .county-icon {
          width: 2rem;
          height: 100%;
        }
        .county-title {
          color: #999;
          margin-left: 0.5rem;
        }
      }

      .title {
        height: 3.2rem;
        line-height: 1.6rem;
        color: #222333;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .price {
        font-size: 1.4rem;
        margin-top: 1rem;
        color: #fd5633;
      }
      .share {
        color: #3c8a58;
        position: absolute;
        right: 0;
        z-index: 10;
      }
      .estimate {
        color: #fd5633;
      }
      // .shop {
      //   font-size: 1.2rem;
      //   overflow: hidden;
      //   text-overflow: ellipsis;
      //   white-space: nowrap;
      //   color: #999;
      //   width: 90%;
      //   margin: auto;
      //   margin-top: 5px;
      // }
    }
    // &:nth-child(3n + 1) {
    //   border-right: 1px solid #e9e9e9;
    // }
  }
}
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 2rem;
}

// .list-swipe {
//   width: 49vw;
//   border-radius: 1rem;
//   margin-left: 1%;
//   img {
//     width: 100%;
//   }
// }
@keyframes jello-horizontal {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
</style>
